<template>
  <div class="box__">
    <tableAssembly
      :hasSelect="false"
      :data="dataList"
      :columns="columnsList"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
    ></tableAssembly>
  </div>
</template>

<script>
import { liveRecordApi, delliveRecord, liveAppeal } from "@/request/api";
import tableAssembly from "@/components/common/tabbleAssembly.vue";
export default {
  components: {
    tableAssembly,
  },
  data() {
    return {
      dataList: [],
      columnsList: [
        {
          prop: "name",
          label: "直播标题",
        },
        {
          prop: "startTime",
          label: "直播开始时间",
        },
        {
          prop: "endTime",
          label: "直播结束时间",
        },
        {
          prop: "status",
          label: "状态",
          render: (m) => {
            let params = {
              ONGOING: "直播中",
              NOT_STARTED: "未开始",
              BANNED: "禁播",
              UNBAN: "解禁",
            };
            return <div>{params[m.status]}</div>;
          },
        },
        {
          prop: "handle",
          label: "操作",
          render: (m) => {
            let params = {
              ONGOING: "进入直播",
              BANNED: "立即申诉",
              UNBAN: "进入直播",
            };
            let btn = null;
            if (m.status == "ONGOING" || m.status == "UNBAN") {
              btn = <div>进入直播</div>;
            }
            return (
              <div>
                {m.status == "ONGOING" || m.status == "UNBAN" ? (
                  <div class="btn-deep" onClick={this.enterLive}>进入直播</div>
                ) : m.status == "BANNED" ? (
                  <div class="btn-deep" onClick={this.openAppealBox.bind(this)}>立即申诉</div>
                ) : null}
                <div class="btn-light" onClick={this.delFn.bind(this,m.id)}>删除</div>
              </div>
            );
          },
        },
      ],
      // 分页
      pagination: {
        page: 1,
        rows: 10,
        total: 0,
        pageSizes: [10, 20],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //申诉发送请求
    appeal(value) {
      liveAppeal({
        appealReason: value,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "申诉成功！",
            type: "success",
          });
          this.getList();
        } else {
          this.$message.error(res.message);
        }
        console.log(res, "申诉请求");
      });
    },
    //申诉内容弹框
    openAppealBox() {
      this.$prompt("请输入申诉理由", "立即申诉", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (value == "") {
            this.$message.error("请输入申诉理由！");
          } else {
            this.appeal(value);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消申诉",
          });
        });
    },
    //删除
    delFn(id) {
      delliveRecord(id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "删除成功！",
            type: "success",
          });
          this.getList();
        } else {
          this.$message.error("删除失败，请重试！");
        }
      });
    },
    //进入直播
    enterLive() {
      console.log('点击进入直播按钮');
    },
    //查看回复
    viewPlayBack() {},
    //获取列表
    getList() {
      liveRecordApi({
        pageNumber: this.pagination.page,
        pageSize: this.pagination.rows,
      }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.result.records;
          this.pagination.total = Number(res.result.total);
          console.log(this.dataList);
        } else {
          this.$message.error("获取直播记录失败，请重试！");
        }
      });
    },
    // 改变页码
    handlePageChange(page) {
      this.pagination.page = page;
      this.getList();
    },
    // 改变页数
    handleSizeChange(size) {
      this.pagination.rows = size;
      this.pagination.page = 1;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.box__ {
  width: 100%;
  min-height: calc(100vh - 17.5rem);
  box-sizing: border-box;
  background-color: #fff;
  padding: 1.25rem;
}
</style>